<template>
	<view>
		<u-tabbar
			:value="value1"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			activeColor="#1D70FF"
			zIndex="999999"
		>
			<u-tabbar-item
				v-for="(Item, Index) in list" 
				:key="Index" 
				:text="Item.title"
				:dot="Item.dot"
				@click="tabbarclick(Item,Index)"
			>
				<image
					class="u-page__item__slot-icon"
					:class="value1==1?'active_icon': ''"
					slot="active-icon"
					:src="Item.active_icon"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					:src="Item.inactive_icon"
				></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		listByUser
	} from '@/api/index.js'
 	export default {
 		props: {
			// 选中的tabbar值, 0 代表第一个 1 代表第二个 以此类推
			value: {
				type: [String, Number],
				required: true
			},
			// 右上角的角标提示信息 - 消息
			badge: {
				type: [Boolean],
				default: false
			},
			
		},
 		data() {
 			return {
				value1: this.value,
				
				list: [{
						title: '首页',
						url: 'pages/home/home',
						active_icon: '/static/tabBar/index_choice.jpg',
						inactive_icon: '/static/tabBar/index.jpg',
						dot: false
					},
					{
						title: '协同',
						url: 'pages/synergy/synergy',
						active_icon: '/static/tabBar/xietong_choice.png',
						inactive_icon: '/static/tabBar/xietong.png',
						dot: false
					},
					{
						title: '消息',
						url: 'pages/message/message',
						active_icon: '/static/tabBar/message_choice.png',
						inactive_icon: '/static/tabBar/message.png',
						dot: false
					},
					{
						title: '我的',
						url: 'pages/mine/mine',
						active_icon: '/static/tabBar/me_choice.png',
						inactive_icon: '/static/tabBar/me.png',
						dot: false
					},
				]
			};
 		},
 		onLoad() {
			let pages = getCurrentPages() //获取加载的页面
			let currentPage = pages[pages.length - 1] //获取当前页面的对象
			let url = currentPage.route //当前页面url
			this.list.forEach((e, i) => {
				if (e.url == url) {

					this.value1 = i
				}
			})
		},
		watch:{
			value: {
				handler(val) {
					this.getlistByUser()
				},
				immediate: true
			}
		},
 		methods: {
			// 获取消息通知
			getlistByUser () {
				listByUser().then(res => {
					if (res.success) {
						if (res.result.sysMsgTotal && res.result.sysMsgTotal>0) {
							this.list[2].dot = true
						} else {
							this.list[2].dot = false
						}
					}
					
				}).catch(res => {
					//联网失败, 结束加载
					// this.mescroll.endErr();
				})
			},
			
			// tabar--点击事件
			tabbarclick(val, i) {
				let pages = getCurrentPages() //获取加载的页面
				let currentPage = pages[pages.length - 1] //获取当前页面的对象
				let url = currentPage.route //当前页面url
				// 判断路由跟url是否不同
				if (url != val.url) {
					uni.switchTab({
						url: '/'+val.url,
					})
				}
				this.getlistByUser()
				// 判断再次点击协同刷新页面
				if (this.value1 == i) {
					this.$emit('update')
				}
			},
		}
 	};
 </script>

<style lang="scss" scoped>
	.u-page__item__slot-icon{
		width: 26px;
		height: 26px;
	}
	.active_icon{
		transition: all 0.5s; //设置图片的动画持续时间为0.5秒
	}
	.active_icon:hover{
		transform: rotate(360deg);
	}
</style>